iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 28
7
Modern Web

從平面轉型成網頁設計的 UI/UX 設計師系列 第 28

【Day 28】Youtube iframe 影片自動縮放大小 - CSS 解決方法

  • 分享至 

  • xImage
  •  

在製作網頁時很常遇到,網站內需要嵌入 Youtube 影片,但影片無法跟隨螢幕尺寸縮放的問題。
通常使用 Youtube 分享功能嵌入的 iframe 原始碼,已經提供固定尺寸,若是拿掉寬度與高度又會跑版,這時候就需要修改 CSS,來達到影片的 RWD(響應式) 效果。

本篇文章會分享,如何利用 CSS 達到 iframe 影片自適應螢幕尺寸的方法。


步驟一

首先,請找到一個 Youtube 影片,筆者用以下 Youtube 影片為範例。
https://ithelp.ithome.com.tw/upload/images/20201013/20107810gdsB1GO572.png
Youtube by Living Coffee: Smooth Jazz Radio - Relaxing Jazz & Sweet Bossa Nova for Calm at Home

點選影片的分享功能,選擇「嵌入」,會跳到以下畫面,請把右方的 iframe 原始碼 複製起來,貼到需要放影片的地方。

https://ithelp.ithome.com.tw/upload/images/20201013/20107810SOOIoT6LkK.png

iframe 原始碼

<iframe width="560" height="315" src="https://www.youtube.com/embed/SORD03t7nlo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

接著請在 iframe 的外面包一層 div(筆者命名為 videobox),利用 videobox 來控制大小縮放的比例,並清除掉多餘的 Code。
width 和 height 也一並清除,得到一個乾淨的 iframe。

<div class="videobox">
<iframe frameborder="0" src="https://www.youtube.com/embed/SORD03t7nlo" allowFullScreen="true">
</iframe>
</div>

這時候的 iframe 影片會如同下圖,小小一個。

https://ithelp.ithome.com.tw/upload/images/20201013/20107810xNvenDws41.png

步驟二

關鍵的來了!請在 CSS 的部分加入以下程式碼:

CSS

.videobox {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.videobox iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

用途在於將 iframe 的寬度與高度設定 100%,並絕對定位於外層 videobox,且自適應 videobox 的大小比例做伸縮。

padding-bottom: 56.25% 為影片高度與寬度的比例 16:9 計算得來。

也就是 16 : 9 時 ➞ 9 / 16 = 56.25%
當影片是 4 : 3 時 ➞ 3 / 4 = 75%
直式影片 3 : 4 = 133%

以上引用自 DREAM TALKER - Youtube iframe 自動縮放

步驟三:獲得一個 RWD 的 iframe 影片

可以縮放筆者的範例看看實際效果 ➜ Codepen

大螢幕時:
https://ithelp.ithome.com.tw/upload/images/20201013/20107810HXzVr5wrND.png

小螢幕時:
https://ithelp.ithome.com.tw/upload/images/20201013/20107810uUerXvY9YU.png


以上是在製作網頁上很實用的 iframe 影片技巧,希望可以幫助到有需要的朋友:)


上一篇
【Day 27】好用的 JavaScript 動態提示工具庫 - Tippy.js
下一篇
【Day 29】超級好用的側邊欄固定效果 - Sticky Sidebar
系列文
從平面轉型成網頁設計的 UI/UX 設計師30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

2
CSScoke
iT邦新手 3 級 ‧ 2020-10-13 21:10:49

讚讚,這個用在 google 地圖也很不錯,尤其是桌機出現超寬地圖跟手機比例不同時,利用簡單的比例修改就能輕鬆完成客戶需求

GG iT邦新手 5 級 ‧ 2020-10-14 21:50:13 檢舉

謝謝 Amos 大師的建議!
原來還可以用在 google 地圖,之前也有遇過手機版比例問題但不知道如何修改,下次馬上來試試看,太感謝了 (*´∀`)~♥

0
yuioo1748
iT邦新手 5 級 ‧ 2022-06-01 04:43:21

(已解決)
大大不好意思,我想請問,為甚麼我css與html的部分都設定好了,換去小螢幕是有跟著縮小,但是在網頁上他卻是左右都貼著螢幕,變得非常難觀看,我看網路上每個分享此方法的人都沒有遇到類似的問題,
還希望大大可以幫我解答,謝謝您.

解決辦法:
原來只要在影片外再一層容器包,就可以讓影片左右邊不會太滿版了,但還是希望可以小一點點


<div class="container" >
    <div class="embed-container embedvideo">
        <iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="#" width="560"></iframe>
    </div>
</div>

我要留言

立即登入留言